<template>
  <view>
    <top-search :maxlength="18" :showState="true" :showMore="false" :showCarNo="false" :showCustomer="false"
      :showSearch="false" :placeholder="'请输入司机车牌号/身份证号'" @bindChange="confirmChange"></top-search>
    <view class="list-wrap">
      <view class="item-wrap" :key="index" v-for="(item, index) in dataSource">
        <view>
          <view class="name-status">
            <text class="plate-no">{{ item.name || '' }}</text>
            <text class="tag" :class="{
                'tag-ineffective': item.status === 1,
                'tag-effective': item.status === 2,
                'tag-invalid': item.status === 3
              }">{{ statusText(item.status) }}</text>
          </view>
          <view class="remark">{{ item.notes || '' }}</view>
        </view>
        <view class="delete">
          <button type="danger" @click="deleteTip(item.id)">删除</button>
        </view>
      </view>
      <uni-load-more :status="isMore" />
    </view>
    <view class="btn-bottom">
      <button type="default" class="btext-color-common-self records" @click="operationRecord()">
        操作记录
      </button>
      <button type="primary" class="bg-color-common-self" @click="addBlackout()">
        新增拉黑
      </button>
    </view>
  </view>
</template>
<script>
  import { toast } from '@/utils/common';
  import { getDictList } from '@/api/login';
  import { getBlacklistPage, deleteBlacklist } from '@/api/blackList';
  export default {
    data() {
      return {
        searchText: '',
        isMore: 'more',
        queryParam: {
          pageNo: 1,
          pageSize: 10
        },
        statusList: [],
        dataSource: []
      };
    },
    computed: {
      statusText() {
        return (value) => {
          return this.statusList.find((e) => e.value === value.toString())?.label;
        };
      }
    },
    async onShow() {
      await this.getDictLists();
      this.initDataSource();
    },
    onPullDownRefresh() {
      this.initDataSource();
    },

    onReachBottom() {
      if (this.isMore == 'more') {
        this.queryParam.pageNo++;
        this.getBlacklistPage();
      }
    },
    methods: {
      async getDictLists() {
        const res = await getDictList();
        if (res.code === 0) {
          this.statusList = (res.data || []).filter(
            (e) => e.dictType === 'blacklist_status'
          );
        }
      },
      confirmChange(data) {
        this.searchText = data.vehicleNo;
        this.initDataSource();
      },
      async getBlacklistPage() {
        const data = { ...this.queryParam };
        if (this.searchText) {
          data['name'] = this.searchText;
        }
        const res = await getBlacklistPage(data);
        if (res.code === 0) {
          const total = res?.data?.total || 0;
          const result = res.data?.list || [];
          this.getDataSource(result);
          this.getIsMore(total);
        } else {
          toast(res.msg);
        }
        wx.stopPullDownRefresh();
      },
      getDataSource(result) {
        if (this.dataSource.length) {
          this.dataSource = [...this.dataSource, ...result];
        }
        if (!this.dataSource.length) {
          this.dataSource = result;
        }
      },
      getIsMore(total) {
        if (total == this.dataSource.length) {
          this.isMore = 'noMore';
        } else {
          this.isMore = 'more';
        }
      },
      operationRecord() {
        uni.navigateTo({
          url: `/packageB/pages/blackList/records`
        });
      },
      addBlackout() {
        uni.navigateTo({
          url: `/packageB/pages/blackList/addBlackout`
        });
      },
      deleteTip(id) {
        uni.showModal({
          title: '提示',
          content: '删除后黑名单将被解除并且无法再次查到该条数据，确定删除吗？',
          success: (suc) => {
            if (suc.confirm) {
              this.deleteBlacklist(id);
            }
          }
        });
      },
      async deleteBlacklist(id) {
        const res = await deleteBlacklist({ id });
        if (res.code === 0 && res.data) {
          toast('删除成功');
          this.initDataSource();
        } else {
          toast(res.msg);
        }
      },
      initDataSource() {
        this.queryParam.pageNo = 1;
        this.isMore = 'more';
        this.dataSource = [];
        this.getBlacklistPage();
      }
    }
  };
</script>
<style lang="scss" scoped>
  .list-wrap {
    padding: 0 10px 90px 10px;

    .item-wrap+.item-wrap {
      margin-top: 10px;
    }

    .item-wrap {
      flex: 1;
      padding: 15px 10px;
      display: flex;
      justify-content: space-between;
      background-color: #fff;
      min-height: 75px;

      .name-status {
        display: flex;
        align-items: center;
      }

      .plate-no {
        font-weight: 600;
        font-size: 35.56rpx;
      }

      .remark {
        color: #666666;
        margin-top: 4px;
        word-break: break-all;
      }

      .tag {
        font-size: 24.89rpx;
        border-radius: 4px;
        padding: 0px 2px;
        margin-left: 10px;
      }

      .delete {
        display: flex;
        align-items: center;
        margin-left: 20px;

        button {
          min-width: 60px;
          height: 30px;
          line-height: 30px;
          color: #ff4d4f !important;
          border: 1px solid #ff4d4f;
          background-color: #fff;
        }
      }
    }
  }

  .tag-ineffective {
    color: #999999;
    border: 1px solid #999999;
    background: rgba(64, 158, 254, 0.1);
  }

  .tag-effective {
    color: #409efe;
    border: 1px solid #409efe;
    background: rgba(64, 158, 254, 0.1);
  }

  .tag-invalid {
    color: #ff4d4f;
    border: 1px solid #ff4d4f;
    background: rgba(255, 77, 79, 0.1);
  }

  .btn-bottom {
    position: fixed;
    display: flex;
    align-items: center;
    bottom: 0;
    width: 100%;
    height: 90px;
    padding: 0 15px;
    background-color: #fff;

    button+button {
      margin-left: 10px;
    }

    button {
      height: 45px !important;
      line-height: 45px !important;
      width: calc(100% - 40px);
    }

    button.records {
      background-color: #fff;
    }
  }
</style>